<template>
<div>
  <!-- <life-cycles :msg="msg" v-if="flag"></life-cycles> -->
  <!-- <button @click="changeHandle">change msg</button> -->
  <button @click="changeflag">change falg</button>
  <!-- <ref></ref> -->
  <!-- <ref-template></ref-template> -->
  <!-- <to-ref></to-ref> -->
  <!-- <to-refs></to-refs> -->
  <!-- <why-ref></why-ref> -->
  <!-- <children @OnSayHello="sayHello"></children> -->
  <MousePosition v-if="flag"></MousePosition>
</div>
</template>

<script>
import LifeCycles from './components/LifeCycles.vue'
import Ref from './components/Ref.vue'
import RefTemplate from './components/RefTemplate.vue'
import ToRef from './components/toRef.vue'
import ToRefs from './components/toRefs.vue'
import WhyRef from './components/WhyRef.vue'
import Children from './components/children.vue' 
import MousePosition from './components/MousePosition/index.vue'
export default {
  name: 'App',
  data() {
    return {
      msg: 'hello cheng',
      flag: true
    }
  },
  components: {
    LifeCycles,
    Ref,
    RefTemplate,
    ToRef,
    ToRefs,
    WhyRef,
    Children,
    MousePosition
  },
  methods: {
    changeHandle() {
      this.msg = 'hello' + Date.now()
    },
    changeflag() {
      this.flag = !this.flag
    },
    sayHello(info) {
      console.log('hello', info)
    }
  }
}
</script>
